<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <video src="./video.mp4" width="50%" muted autoplay></video>
  <iframe src="./video.mp4" frameborder="0" style="display: none;"></iframe> -->
  <!--  <video id="myVideo" src="http://download.websong.wang/%E9%80%92%E5%BD%92.mp4" controls width="50%" autoplay
    muted></video> -->
  <iframe id="myIframe" src="http://download.websong.wang/%E9%80%92%E5%BD%92.mp4" frameborder="0"></iframe>

  <script>
    function n() {

      var iframeVideo
      // 当我使用ifram尝试获取dom得时候，它就没有声音了，应该是浏览器给禁用了。
      /*   window.onload = function () {
          // 获取iframe里得video
          iframeVideo = document.getElementById('myIframe')
          iframeVideo = iframeVideo.contentWindow.document.querySelector('video')
        } */
      //获取视频DOM元素
      var myVideo = document.getElementById("myVideo");

      myVideo.oncanplay = function () {
        // console.log("准备就绪");
      };

      //监听播放开始
      // 标识符，第一次不要执行，必须是点击暂停后才生效
      var flag = 1;
      myVideo.addEventListener('play', function () {
        // console.log("开始播放");
        // 这个在线上不好使了，还是得改成ifram
        // myVideo.muted = false
        if (flag > 1) {
          iframeVideo.play()
        }

      });

      //监听播放结束
      myVideo.addEventListener('pause', function () {
        // console.log("播放暂停");
        flag++

        iframeVideo = document.getElementById('myIframe').contentWindow.document.querySelector('video')
        if (iframeVideo) {
          iframeVideo.pause()
        }

      });

      //监听播放结束
      myVideo.addEventListener('ended', function () {
        // console.log("播放结束");
      });

      //使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态
      myVideo.addEventListener("timeupdate", function () {
        var timeDisplay;
        //用秒数来显示当前播放进度
        timeDisplay = Math.floor(myVideo.currentTime);
        // console.log(Math.floor(myVideo.currentTime))

        //当视频播放到 4s的时候做处理
        if (timeDisplay == 4) {
          //处理代码
        }
      }, false);

    }
  </script>

</body>

</html>